<template>
  <div class="sidebar-item">
    <template>
      <el-menu-item :key="item.name" :index="item.name" :default-active="$route.path" @click="_addCacheRoute(item)">
        <i class="el-icon-news" />
        <span slot="title">{{ item.meta.title }}</span>
      </el-menu-item>
    </template>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'SidebarItem',
  props: {
    item: {
      type: Object
    }
  },
  computed: {
    ...mapState('routes_source', ['CACHE_ROUTES'])
  },
  mounted() {
    this.setSideNavRoute()
  },
  methods: {
    ...mapMutations('routes_source', ['SET_CACHE_ROUTES', 'SET_CURRENT_SIDE_NAV']),
    // 设置侧边栏高亮
    setSideNavRoute() {
      let path = window.location.href.split("#")[1];
      if(this.item.path == path) {
        this._addCacheRoute(this.item);
      }
    },
    // 路由部分设置
    _addCacheRoute(item) {
      this.SET_CACHE_ROUTES(item)
      this.SET_CURRENT_SIDE_NAV(item.name)
      this.$router.push(item).catch(() => {})
    }
  }
}
</script>
<style lang="scss">
.el-menu-item.is-active{
  color: #4180B1;
}

</style>

